<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<script type="text/javascript" src="./js/jquery-1.4.1.min.js"></script>
	<script type="text/javascript" src="./js/jquery.js"></script>
	<script type="text/javascript" src="./js/jquery.jqzoom.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$(".jqzoom").jqueryzoom({
				xzoom: 250, 		//zooming div default width(default width value is 200)
				yzoom: 250, 		//zooming div default width(default height value is 200)
				offset: 10, 		//zooming div default offset(default offset value is 10)
				position: "right" 	//zooming div position(default position value is "right")
			});
		});
	</script>
	<link rel="stylesheet" href="./css/jqzoom.css" type="text/css"/>
	
	<style type="text/css">
		*{
			margin:0px;
			padding:0px;
		}
		.top{
			width:100%; 
			height:35px; 
			line-height:35px; 
			font-size:12px;	
		}
		.top ul li{
			list-style:none;
			float:right;
			width:46px;
		}
		a{
			color:#06F;
			text-decoration:none;
		}
		a:hover{
			text-decoration:underline;
		}
		table tr{
			height: 42px;
		}
		#large{
			position:absolute;	
			z-index:999;
		}
	</style>
</head>

<body>
	<div style="height:35px;;width:100%;border-bottom:1px solid #CCC; z-index:-1; position:absolute; background:#EFEFEF;"></div>
	<div style="width:1200px; margin:auto;">
       	<!-- 顶部索引 -->
        <div class="top">
        	<div style="width:50%; float:left;">你好！欢迎进入中国报险网。</div>
            <div style="width:50%; float:right; text-align:right;">
				<jsp:include page="case_top.jsp"></jsp:include>
            </div>
        </div>
        <!-- 主体内容 -->
        <div style="width:100%; float:left;">
            <div style="width: 1000px; margin:38px 120px;">       
				<div style="width: 1000px; height: 60px; background: #0C9; border-top-left-radius: 10px; border-top-right-radius: 10px; text-align: center; line-height: 60px; color: #FFF; font-weight:bold; font-family: '微软雅黑'">案件详情</div>
				<div style="border: 1px solid #CCC; font-family: '微软雅黑' ">
					<!-- 案件详情信息 -->
					<table border="1px" align="center" width="100%" cellspacing="0px" bordercolor="#E8E8E8">
						<tr>
							<td colspan="4">&nbsp;案件编号：${case.cid }</td>
						</tr>

						<tr>
							<td align="right" width="200px">报险人：</td>
							<td width="300px">
								&nbsp;${case.customer.cname }
							</td>
							<td align="right" width="200px">接案人员：</td>
							<td width="300px">
								&nbsp;${case.manager.smname }								
							</td>
						</tr>
						<tr >
							<td align="right">身份证：</td>
							<td>
								&nbsp;${case.customer.cidcard }
							</td>
							<td align="right">车牌号码：</td>
							<td>
								&nbsp;${case.car.cno }
							</td>
						</tr>
						<tr>
							<td align="right">车架号：</td>
							<td>
								&nbsp;${case.car.cvin }
							</td>
							<td align="right">发动机号：</td>
							<td>
								&nbsp;${case.car.cengine }
							</td>
						</tr>
						<tr>
							<td align="right">手机号码：</td>
							<td colspan="3">
								&nbsp;${case.cphone }
							</td>
						</tr>
						<tr>
							<td align="right">报险类型：</td>
							<td colspan="3">
								&nbsp;${case.casetype.ctname }
							</td>
						</tr>
						<tr>
							<td align="right">报险地点：</td>
							<td colspan="3">
								&nbsp;${case.caddress }
							</td>
						</tr>
						<tr>
							<td align="right">报险时间：</td>
							<td colspan="3">
								&nbsp;${case.cdate }
							</td>
						</tr>
						<tr id="body">
							<td align="right">图片：</td>
							<td colspan="3">
								<s:iterator value="#request.case.prcs" var="prc">													
									<div style="float:left;">
										<div class="jqzoom"  style='margin-right:5px;'>
											<img src="<s:property value='#prc.purl'/>" width="150px" height="150px" alt="scarpa"  jqimg="<s:property value='#prc.purl'/>">
										</div>	
										<!--<div>&nbsp;<img src="<s:property value='#prc.purl'/>" id="prc<s:property value='#prc.pid'/>" onmousemove="movePrc(this)" width="120px" height="120px"/></div>-->
										<div style="text-align: center; font-size:12px;"><s:property value='#prc.pname'/></div>
									</div>
								</s:iterator>				
								<!--<div id="large"></div>-->
							</td>
						</tr>
						<tr >
							<td height="100px" align="right">备注：</td>
							<td colspan="3">
								<div style="width:800px; word-wrap:break-word;">${case.cdesc }</div>
							</td>
						</tr>
						<tr>
							<td colspan="4" height="60px" align="center">
								<a href="javascript:history.go(-1)"><button style="width: 120px; height: 38px; background: #0C9; border: none; color: #FFF; font-size: 16px;">返回</button></a>
							</td>
						</tr>
					</table>
				</div>
            </div>
        </div>
        <div style="width:100%; height:30px; text-align:center; line-height:30px; float:left; font-size:14px;">Copyright© 中国报险网 2007-2015，All Rights Reserved</div>
    </div>
    <script type="text/javascript">     
       	//实现鼠标放到图片上，展现另外一个层显示图片
		/*var la = $("#large");
		la.hide();

		function movePrc(obj){
			$("#" + obj.id + "").mousemove(function(e){
				la.css({
					top : e.pageY,
					left : e.pageX
				}).html('<img src = "' + this.src + '" width="460px" height="380px"/>').show();
			}).mouseout(function(){
				la.hide();
			});
		}*/
 	</script>	
</body>
</html>
